import React from 'react'
import Index from './layout/Index'
import Login from './views/login/Index'

/*
HashRouter: Hash 路由模式
BrowserRouter: History 路由模式
Routes: 路由出口
Route: 路由规则
Navigate: 路由重定向
*/
import { HashRouter, BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import menus from './router'

export default function App() {

    // 渲染二级路由的函数
    const renderRouter = menus => {
        return menus.map(item => {
            if (item.children) {
                // 有子路由
                return renderRouter(item.children)
            } else {
                // 没有子路由
                return <Route exact key={item.key} path={item.key} element={item.element} />
            }
        })
    }

    return (
        <>
            <HashRouter>
                <Routes>
                    <Route path='/' element={<Index />}>
                        {/* 配置二级路由 */}
                        {renderRouter(menus)}
                    </Route>

                    {/* exact 精确匹配，当路由只是 /login 的时候才让其进入登录页面 */}
                    <Route path='/login' exact element={<Login />} />
                </Routes>
            </HashRouter>
        </>
    )
}
